<template>
	<div class="income-submit-confirm" v-show="false">
		<p class="title">{{title}}</p>
		<div class="add-form">
			<slot></slot>
		</div>
		<el-col :span="24" style="margin-top:14px" class="btn-group">
			<el-button type="danger" round class="add-btn" @click="submit">提 交</el-button>
			<el-button type="danger" round class="select-btn" @click="close">取 消</el-button>
		</el-col>
	</div>
</template>

<script>
	export default {
		name: '',
		props: {
			value: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				visible: this.value,
				layIndex: null
			};
		},
		methods: {
			submit() {
				this.$emit('onSubmit');
			},
			close() {
				this.visible = false;
				this.$emit('input', false);
			}
		},
		watch: {
			value(val) {
				this.visible = val;
			},
			visible(val) {
				if(val === false) {
					layer.close(this.layIndex);
				} else {
					this.$nextTick(() => {
						let that = this;
						this.layIndex = layer.open({
							type: 1,
							shadeClose: true,
							title: "",
							skin: "layui-layer-rim", //加上边框
							area: ["60%", "500px"], //宽高
							content: $(this.$el),
							end: function() {
								that.close();
							}
						});
					});
				}
			}
		}
	}
</script>

<style scoped>
	.title {
		width: 100%;
		float: left;
		padding: 0 0 20px 0;
		color: #575757;
		font-size: 22px;
	}
	
	.add-form {
		width: 80%;
		padding: 20px 10%;
		float: left;
		background: #fff;
		border: 1px solid #d9d9d9;
	}
	
	.select-btn {
		height: 40px;
		padding: 0 33px;
		margin-right: 20px;
		float: right;
		background: url("/static/img/hui-btnBG.png");
		background-size: 100% 100%;
		border: 0;
		color: #000;
	}
	
	.add-btn {
		height: 40px;
		padding: 0 33px;
		float: right;
		background: url("/static/img/nav-bg.png");
		background-size: 100% 100%;
		border: 0;
	}
</style>